<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Switcher</title>
    <style>
        /* 样式设置 */
        #content {
            border: 1px solid #000;
            padding: 20px;
            min-height: 200px;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#" onclick="switchPage('page1')">Page 1</a></li>
            <li><a href="#" onclick="switchPage('page2')">Page 2</a></li>
            <li><a href="#" onclick="switchPage('page3')">Page 3</a></li>
        </ul>
    </nav>
    <div id="content">
        <!-- 页面内容将在这里显示 -->
    </div>

    <script>
        function switchPage(pageId) {
            var content = document.getElementById('content');
            switch (pageId) {
                case 'page1':
                    content.innerHTML = '<h1>Page 1 Content</h1><p>This is the content of page 1.</p>';
                    break;
                case 'page2':
                    content.innerHTML = '<h1>Page 2 Content</h1><p>This is the content of page 2.</p>';
                    break;
                case 'page3':
                    content.innerHTML = '<h1>Page 3 Content</h1><p>This is the content of page 3.</p>';
                    break;
                default:
                    content.innerHTML = '<h1>Error</h1><p>Unknown page.</p>';
            }
        }
    </script>
</body>
</html>








